<!--
  Generated template for the ConsumeModalPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-navbar color="secondary">
          <ion-title><span class="custom-font-size-t">Introducir Consumos</span></ion-title>
          <ion-buttons end>
              <button ion-button (click)="closeModal()">
                  <span class="custom-font-size-t">Atrás</span>
              </button>
          </ion-buttons>
        </ion-navbar>
</ion-header>


<ion-content padding>
    <ion-title><span class="custom-font-size-t">{{line.product_name}}</span></ion-title>
    
    <ion-list>
        <ion-item *ngIf="(mode !== 'show')">
            <ion-label color="primary" stacked><span>Cantidad en {{line.uom_name}}</span></ion-label>
            <ion-input type="number" [(ngModel)]="line.qty" name='qty' clearInput (ionChange)='onchange_uom()' placeholder="Introducir cantidad"></ion-input>
            <button *ngIf="line.product_name.toLowerCase().includes('bobina')" ion-button outline large item-right color="dark" (click)="convert_bobbin(line.qty)">
                <ion-icon name="swap" ></ion-icon>
            </button>
            <button ion-button outline large item-right color="dark" (click)="open_calculator()">
                <ion-icon name="calculator" ></ion-icon>
            </button>
        </ion-item>
        <ion-item *ngIf="(mode !== 'show' && line.type == 'finished')">
            <ion-label color="primary" stacked><span>Cantidad en {{this.prodData.uos}}</span></ion-label>
            <ion-input type="number" [(ngModel)]="uos_qty" name='uos_qty' clearInput (ionChange)='onchange_uos()' placeholder="Cant. segunda unidad"></ion-input>
        </ion-item>
        <ion-item *ngIf="(mode !== 'show')">
            <ion-label color="primary" stacked><span>Lote</span></ion-label>
            <ion-input type="text" [(ngModel)]="line.lot_name" required name='lot'  placeholder="Introducir lote" readonly></ion-input>
        </ion-item>
    </ion-list>
    <ion-searchbar *ngIf="mode === 'show'" (ionInput)="getItems($event)"></ion-searchbar>
    <ion-list *ngIf="mode === 'show'"> 
         <button ion-item *ngFor="let lot of items" (click)="lotSelected(lot)">
            {{ lot.name  }} ({{ lot.qty_available }})
        </button>  
    </ion-list> 

    <ion-grid>
        <ion-row *ngIf="mode !== 'show' && line.type == 'in'">
            <ion-col>
                <button ion-button full color="secondary" (click)="showLots()">Ver lotes</button>
            </ion-col>
        </ion-row>
        <ion-row *ngIf="mode !== 'show' && line.type == 'scrapped'">
            <ion-item>
                <ion-label color="primary" stacked>Tipo de Scrap</ion-label>
                <ion-select [(ngModel)]="line.scrap_type" okText="Aceptar" cancelText="Cancelar">
                    <ion-option value="losses">Mermas</ion-option>
                    <ion-option value="scrap">Desechado</ion-option>
                </ion-select>
            </ion-item>
        </ion-row>
        <ion-row *ngIf="mode !== 'show'">
            <ion-col>
                <button ion-button block (click)="removeLine()" color="danger">Eliminar</button>
            </ion-col>
            <ion-col>
                <button ion-button block (click)="confirmModal()">Confirmar</button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>
